<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Basic Development Framework</title>
<d:script id="jquery,jquery-cookie,om-ui" />
<d:css id="om-ui" />
<d:css path="static/style/common.css"/>
<script type="text/javascript">
$(document).ready(function() {
	var theme = '${sessionScope._SESSION_THEME}'
			|| "default";
	//theme选择
	$('#combo-theme').omCombo(
			{
				dataSource : [ {
					text : 'default',
					value : 'default'
				}, {
					text : 'apusic',
					value : 'apusic'
				}, {
					text : 'elegant',
					value : 'elegant'
				} ],
				value : theme,
				editable : false,
				onValueChange : function(target, newValue,
						oldValue, event) {
					if (newValue != theme) {
						//更改当前主题
						$.ajax({
							url : "${ctx}/system/theme",
							data : {
								"theme" : newValue
							},
							success : function() {
								document.location.reload();
							}
						})
					}
				}
			});
	var initConfig = {
		buttonLogout : {//注销按钮
			onClick : function() {
				if (confirm("确认退出系统?")) {
					document.location.href = "${ctx}/logout";
				}
			}
		},
		treeNav : {//树形菜单
			onClick : function(nodeData, event) {
				var path = nodeData.attr("path");
				if (path) {
					var tabId = 'tab_'
							+ nodeData.attr("id");
					if (tabMainFrame.getAlter(tabId)) {
						tabMainFrame.activate(tabId);
					} else {
						tabMainFrame.add({
							title : nodeData.text,
							tabId : tabId,
							content : "<iframe id='"+nodeData.id+"' border=0 frameBorder='no' name='inner-frame' src='"+path+"' height='100%' width='100%'></iframe>",
							closable : true
						});
					}
				}
			}
		},
		menuPersonInfo : {//个人信息的下拉菜单
			onSelect : function(item) {
				switch(item.id){
				case "userInfo":{
					dialogUserInfo.open();
					break;
				}
				case "changePassword":{
					dialogChangePassword.open();
					break;
				}
				}
			}
		},
		dialogChangePassword:{
			buttons:[
			         {text:"确定",click:function(){
			        	 var dialogWindow = $("iframe",$("#dialogChangePassword"))[0];
			     		$(dialogWindow.contentDocument).find("form").omAjaxSubmit({
			     			dataType:"json",
			     			success:function(data){
			    				if(data.success){
			    					$.omMessageTip.show({
			    						timeout:3000,
			    						title:"提示",
			    						content:"操作成功！"
			    					});
			    					dialogChangePassword.close();
			    				} else {
			    					$.omMessageTip.show({
			    						timeout:3000,
			    						title:"失败",
			    						content:data.msg
			    					});
			    				}
						}
			         });
		         }},
		         {text:"取消",click:function(){
		        	 dialogChangePassword.close();
		         }}
		         ]
		}
	}
	//对页面中的组件进行初始化
	initUI(initConfig);
	var ifh = tabMainFrame.$.height() - tabMainFrame.$.find(".om-tabs-headers").outerHeight() - 10; //为了照顾apusic皮肤，apusic没有2px的padding，只有边框，所以多减去2px
});
</script>
<style type="text/css">
#tabMainFrame .om-panel-body {
	padding: 0;
}
.header{
display:block;
background:url("${ctxStatic}/images/header_bg.png");
height:30px;
background-color:#102C4A;
overflow:hidden;
}
.header .banner{
float:left;font-size: 30px; font-family: 隶书, 宋体; font-weight: lighter;display: block;height: 30px;
}
.header .nav{
display: block;
float: left;
height: 21px;
position: absolute;
top: 1px;
right: 0;
z-index: 31;
}
.header ul li{
list-style:none;
}
.header .nav li {
float: left;
margin-left: -1px;
padding: 0 0px;
position: relative;
}
</style>
</head>
<body class="ui-border-layout">
	<div id="north-panel" class="ui-border-layout-panel" region="north" header="false"
		height="32">
		<div class="header">
		<div class="banner">
			<span style='color: red'>基础开发框架</span>演示系统
		</div>
		<ul class="nav">
			<li>
						<!-- 工具条 -->
				<div id="buttonbarControl" class="ui-buttonbar">
					<button id="buttonPersonInfo" class="ui-button" label="个人信息"
						right-icon="${ctx }/static/icons/down.png"></button>
					<button id="buttonLogout" class="ui-button" label="注销"></button>
				</div>
				<div id="menuPersonInfo" class="ui-menu" container="#buttonPersonInfo" style="display: none">
					<!-- 个人信息的菜单 -->
					<div class="ui-menu-model">
						<span id="userInfo" label="个人信息"></span>
						<span id="changePassword" label="修改密码"></span>
					</div>
				</div>
			</li>
			<li>
				<div id="change-combo">
					样式选择:<input id="combo-theme">
				</div>
			</li>
		</ul>
		</div>
	</div>
	<div id="west-panel" class="ui-border-layout-panel" label="系统菜单"
		width="180" region="west" resizable="true" collapsible="true">
		<!-- 树形结构表式的菜单 -->
		<div id="treeNav" class="ui-tree">
			<div class="ui-tree-model">
				<span text="系统管理" expanded="true">
					<span id="node_user_manager" text="用户管理" path="${ctx }/system/user" expanded="true"></span>
					<span id="node_role_manager" text="角色管理" path="${ctx }/system/role" expanded="true"></span>
					<span id="node_dept_manager" text="部门管理" path="${ctx }/system/dept" expanded="true"></span>
					<span id="node_resource_manager" text="资源管理" path="${ctx }/system/menu" expanded="true"></span>
				</span>
				<span text="结点2">
					<span text="结点2_1"></span>
					<span text="结点2_2"></span>
				</span>
				<span text="结点3">
					<span text="结点3_1"></span>
					<span text="结点3_2"></span>
				</span>
			</div>
		</div>
	</div>
	<div id="center-panel" class="ui-border-layout-panel" region="center" header="false">
		<!-- 主面板 -->
		<div id="tabMainFrame" class="ui-tabs" closable="false" height="98%">
			<ul>
				<li><a href="#tab_index">首页</a></li>
			</ul>
			<div id="tab_index">首页Banner</div>
		</div>
	</div>
	<div id="south-panel" class="ui-border-layout-panel" region="south" header="false"
		height="30">
		<!-- 底栏 -->
		<div align="center">
		<a href="http://code.google.com/p/bdf" target="_blank">
			http://code.google.com/p/bdf</a>
		</div>
	</div>
	<div id="dialogUserInfo" title="用户信息" class="ui-dialog" autoOpen="false" modal="true" path="${ctx }/system/user/userinfo" cacheable="true" width="480" height="400"></div>
	<div id="dialogChangePassword" title="修改密码" class="ui-dialog" autoOpen="false" modal="true" path="${ctx }/system/user/changePassword" cacheable="false" width="480" height="300">
	</div>
</body>
</html>